<template>
  <el-dialog :visible.sync="dialogVisible" :fullscreen="true" @close="close">
     <editor
          @setEditorValue="setEditorValue"
          :info="tempVal"
      />
    <span slot="footer" class="dialog-footer">
      <el-button type="warning" @click="close()">取消</el-button>
      <el-button type="success" @click="submit('refForm')">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Editor from "./Editor";

export default {
  name: "dialogBox",
   components: {
    Editor,
  },
  props: {
    info: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      dialogVisible: true,
      tempVal: ''
    };
  },
  mounted() {
    this.tempVal = this.info;
    this.$nextTick(() => {
      document.querySelector('.el-dialog__body .ql-editor').style.maxHeight = '100%'
      document.querySelector('.el-dialog__body .ql-editor').style.height = '100%'
    })
  },
  methods: {
    /**
     * @Desc 数据提交
     * */
    async submit() {
     this.$emit('confirm', this.tempVal)
    },

    /**
     * @Desc 关闭
     * @params {String}
     * @return {Object}
     * */
    close() {
      this.$emit("close");
    },

    /*
     * @Desc: 附文本内容
     * @params: {String}
     * @return: {Object}
     */
    setEditorValue(val) {
      this.tempVal = val;
    },
  }
};
</script>

<style lang="less" scoped>
/deep/ .el-dialog{
  display: flex;
  flex-direction: column;
}
/deep/ .el-dialog__body{
  padding-top: 20px;
  flex: 1;
  margin: 20px 0;
  overflow: auto;
}
/deep/.el-form-item{
  margin-bottom: 16px!important;
  display: flex;
  .el-form-item__content{
    flex: 1;
    display: inline-flex;
    margin-left: 6px!important;
  }
  .el-input, .el-select{
    width: 75%;
  }
}
.upload-btn{
  height: 28px;
  margin-left: 4px;
}
</style>
